<template>
	<view class="page-container bg">
		<!-- 新增 -->
		<view class="mine-box pl-30 pr-30">
			<view class="mine-main">
				<u-tabs font-size="26" active-color="#e66633" inactive-color="#3c3c3c" bg-color="#fff" :list="tabs"
					:is-scroll="true" :current="current" @change="change"></u-tabs>

				<view class="mine-main-ul">
					<view @click="goDetails(item.id)" class="mine-main-li mb-20" v-for="(item,index) in list"
						:key="index">
						<view class="mine-main-head flex1">
							<view class="mine-main-img">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="mine-main-right flex-1">
								<view class="mine-main-name size-30 white">{{ item.name }}</view>
								<view class="flex">
									<view class="mine-main-title size-26"
										:class="{'blue':item.status == 2,'red':item.status == 3}">{{ getStatus(item) }}
									</view>
									<view class="white size-28" v-if="headIndex == 0 && item.stock">
										#{{ item.number_f }}/{{ item.stock }}
									</view>
								</view>

								<view class="mine-main-price flex1 flex-bottom">
									<text>￥</text>
									<text>{{ item.price }}</text>
								</view>
							</view>
						</view>
						<view class="mine-main-footer flex1 flex-middle mt-20 flex-end"
							v-if="item.status == 1 || item.status == 2">
							<template v-if="item.status == 1">
								<u-button class="pink" hover-class="none"
									v-if="headIndex == 0 && helpContent.goods_status == 1"
									@click.stop="changeItem(item,index,1)">转赠</u-button>
								<u-button v-if="helpContent.is_trade == 1" class="blue" hover-class="none"
									@click.stop="changeItem(item,index,2)">挂售</u-button>
								<u-button class="red" hover-class="none" v-if="headIndex == 1"
									@click.stop="changeItem(item,index,3)">开盒</u-button>
							</template>
							<u-button class="red" hover-class="none" v-if="item.status == 2"
								@click.stop="changeItem(item,index,4)">{{ item.is_show == 1 ? '下架' : '上架' }}</u-button>
						</view>
					</view>
					<u-empty class="pt-90" mode="data" v-if="!list || list.length === 0"></u-empty>
				</view>
			</view>
		</view>
		<!-- 出售new 2022-08-26 Aoingai -->
		<u-popup v-model="saleShow2" width="78%" mode="center" border-radius="30">
			<view class="pt-30">
				<view class="plr-40 ">
					<view class="ipt flex1 flex-center flex-middle mt-45 pl-150">
						<text>￥</text>
						<input type="digit" v-model="sale2.price" @blur="totalPriceBlur" placeholder="请输入总价格">
					</view>
					<view class="ipt ipt2 mt-20 flex1 flex-middle pl-20">
						<input type="text" disabled :value="sale2.free ? `手续费(${freeRatioShow}%):￥${sale2.free}` : ''"
							:placeholder="`手续费(总价格${freeRatioShow}%)`">
					</view>
					<view class="ipt ipt2 mt-20 flex1 flex-middle pl-20 ">
						<input type="text" disabled :value="sale2.surplusPrice ? `实收￥：${sale2.surplusPrice}` : ''"
							placeholder="实收金额">
					</view>
					<view class="ipt ipt2 mt-20 mb-60 flex1 flex-middle pl-20 ">
						<input type="password" v-model="sale2.password" placeholder="请输入支付密码">
					</view>
				</view>

				<view class="flex1 footer">
					<view class="flex-1 footer-btn size-30 color-9" @click="saleShow2 = false">取消</view>
					<view class="flex-1 footer-btn size-30 color-1a" @click="submitSale2">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 转增 -->
		<u-popup v-model="increaseShow" width="78%" mode="center" border-radius="30">
			<view class="pt-30">
				<view class="plr-40 ">
					<view class="ipt flex1 flex-middle mt-20 pl-20">
						<input type="number" v-model="transfer.phone" maxlength="11" placeholder="请输入对方手机号">
					</view>
					<view class="flex mt-20 mb-60">
						<view class="ipt flex1 flex-middle pl-20">
							<u-field v-model="transfer.captcha" label-width="0" maxlength="6" :border-bottom="false"
								placeholder="请输入验证码">
								<u-button size="mini" class="code" slot="right" type="success" @click="getCode(1)">
									{{codeText}}
								</u-button>
							</u-field>
							<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
						</view>

					</view>
				</view>

				<view class="flex1 footer">
					<view class="flex-1 footer-btn size-30 color-9" @click="increaseShow = false">取消</view>
					<view class="flex-1 footer-btn size-30 color-1a" @click="submitTransfer">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="openShow" mode="center" width="64%" border-radius="30">
			<view class="pl-30 pr-30 pt-40 pb-40">
				<view class="size-30 f-bold color-1a text-center">提示</view>
				<view class="size-28 color-1a text-center mt-30 mb-30">此盲盒为特殊盲盒，需要消耗一定藏品才可打开，您的藏品不足，暂时不能开盒。</view>
				<view class="flex1 flex-middle flex-center">
					<u-button class="open-btn" hover-class="none" @click="openShow = false">我知道了</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	export default {
		components: {
			tab,
		},
		data() {
			return {
				userInfo: {},
				goodsId: 0,
				goodsName: '',
				status: 0, //
				tabs: [
					/*{
						name: '全部',
						type: 0
					},*/
					{
						name: '持有中',
						type: 1
					},
					{
						name: '挂售中',
						type: 2
					}, {
						name: '交易中',
						type: 3
					},
					{
						name: '已出售',
						type: 4
					},
					{
						name: '已转赠',
						type: 5
					},
					{
						name: '已合成',
						type: 6
					},
				],
				tabList: [{
						name: '全部'
					},
					{
						name: '持有中'
					},
					{
						name: '挂售中'
					},
					{
						name: '已出售'
					}
				],
				list: [],
				headIndex: 0, //
				current: 0,
				increaseShow: false, //转增
				saleShow: false, //
				openShow: false,
				item: {}, //选中的元素
				transfer: {
					id: '',
					phone: '',
					captcha: ''
				},
				sale: {
					id: '',
					captcha: '',
					price: '', // 实收金额
				},
				saleShow2: false, // 藏品挂售
				freeRatio: 0, // 手续费，默认0.1
				freeRatioShow: '0%', // 手续费，默认0.1
				sale2: {
					id: '',
					price: '', // 输入金额
					free: '', // 手续费
					surplusPrice: '', // 剩余金额
					password: '', // 密码
				},
				codeText: '', //
				helpContent: {}, //


			}
		},
		onLoad(options) {
			this.current = options.current || 0;
			this.goodsId = options.goodsId || 0;
			this.goodsName = options.goodsName || '我的藏品';
			uni.setNavigationBarTitle({
				title: this.goodsName,
			});
			this.getUserInfo();
			this.gethelpContent();
			this.getFreeRatio();
			this.change(this.current);
		},
		methods: {
			getUserInfo() {
				this.$http('api/user/userInfo').then(res => {
					this.userInfo = res
				}).catch(err => {
					console.log(err);
				})
			},
			//获取是否隐藏转赠
			gethelpContent() {
				this.$http('api/login/helpContent').then(res => {
					this.helpContent = res
				})
			},
			// 计算手续费，实收金额 2022-08-26 Aoingai
			totalPriceBlur() {
				let price = this.sale2.price;
				const freeRatio = parseFloat(this.freeRatio);
				if (price && !isNaN(price)) {
					price = this.sale2.price.match(/^\d+(?:\.\d{0,2})?/)[0];
					this.sale2.price = `${parseInt(price, 10)}`;
					this.sale2.free = (parseFloat(price) * freeRatio)
						.toFixed(4)
						.match(/^\d+(?:\.\d{0,2})?/)[0];
					this.sale2.surplusPrice = (parseFloat(price) - parseFloat(this.sale2.free))
						.toFixed(4)
						.match(/^\d+(?:\.\d{0,2})?/)[0];
				} else {
					this.sale2.free = '';
					this.sale2.surplusPrice = '';
				}
			},
			//获取手续费  2022-08-26 Aoingai
			getFreeRatio() {
				this.$http('api/newapi/freeRatio').then(res => {
					this.freeRatio = res;
					this.freeRatioShow = (parseFloat(res) * 100).toFixed(2);
				})
			},
			//获取验证码1转赠
			codeChange(text) {
				this.codeText = text;
			},
			getCode(type) {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('api/login/sendCode', {
						phone: this.userInfo.phone,
						type: type == 1 ? 2 : 8
					}, 'GET').then(res => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(err => {
						console.log(err);
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			goDetails(id) {
				uni.navigateTo({
					url: this.headIndex == 0 ? `/pages/my/collectDetails?id=${id}` :
						`/pages/my/boxDetails?id=${id}`
				})
			},
			submitSale() {
				if (!this.sale.totalPrice) return uni.showToast({
					title: '请输入总价格！',
					icon: 'none'
				})
				this.saleShow = false
				if (!this.sale.captcha) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				this.$http(this.headIndex == 0 ? 'api/orders/goodsSale' : 'api/orders/boxSale', this.sale, 'POST').then(
					res => {
						this.sale.price = '';
						this.sale.captcha = ''
						uni.showToast({
							title: "挂售成功!",
							icon: "none"
						})
						this.status = 0;
						this.getUsersGoodsList();
					})
			},
			// 藏品挂售 2022-08-26 Aoingai
			submitSale2() {
				if (!this.sale2.price) return uni.showToast({
					title: '请输入总价格！',
					icon: 'none'
				})
				if (!this.sale2.password) return uni.showToast({
					title: '请输入密码！',
					icon: 'none'
				})
				this.saleShow2 = false;
				// return console.log(this.sale2);
				this.$http('api/orders/goodsSale', this.sale2, 'POST').then(res => {
					this.sale2.price = '';
					this.sale2.surplusPrice = '';
					this.sale2.free = '';
					this.sale2.password = '';
					uni.showToast({
						title: "挂售成功!",
						icon: "none"
					})
					this.status = 0;
					this.getUsersGoodsList();
				})
			},
			//确认转赠
			submitTransfer() {
				if (!this.transfer.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
					title: '请输入正确的转赠人手机号',
					icon: 'none'
				})
				if (!this.transfer.captcha) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				this.increaseShow = false
				this.$http('api/orders/goodsTransfer', this.transfer, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.status = 0;
					this.getUsersGoodsList();
				})
			},
			changeHead(index) {
				this.current = 0
				this.status = 0
				this.headIndex = index
				this.getUsersGoodsList()
			},
			//1转赠2挂售3开盒
			changeItem(item, index, type) {
				if (type == 1) {
					this.item = item
					this.transfer.id = item.id
					this.increaseShow = true
				} else if (type == 2) {
					this.item = item
					// ============ 2022-08-26 Aoingai start ============
					if (this.headIndex == 0) {
						this.sale2.id = item.id;
						this.saleShow2 = true;
					} else {
						this.sale.id = item.id;
						this.saleShow = true;
					}
					//============ 2022-08-26 Aoingai end ============
					// uni.showModal({
					//     title: '提示',
					// 		content:'是否确认挂售到市场？',
					//     success: function (res) {
					//         if (res.confirm) {
					// 					console.log(res);
					//             console.log('用户点击确定');
					//         } else if (res.cancel) {
					//             console.log('用户点击取消');
					//         }
					//     }
					// });
				} else if (type == 3) {
					uni.showModal({
						content: '立即拆开?',
						confirmColor: '#EFE0C0',
						success: (res) => {
							if (res.confirm) {
								this.$http('api/orders/boxOpen', {
									id: item.id,
									captcha: '123456'
								}, 'POST').then(res => {
									this.getUsersGoodsList();
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				} else if (type == 4) {
					let msg = item.is_show == 1 ? '下架' : '上架';
					uni.showModal({
						content: `是否确认${msg}？`,
						success: (res) => {
							if (res.confirm) {
								this.$http(this.headIndex == 0 ? 'api/orders/goodsUpdateShow' :
									'api/orders/boxUpdateShow', {
										id: item.id,
										is_show: item.is_show == 1 ? 0 : 1
									}, 'POST').then(res => {
									uni.showToast({
										title: "操作成功!",
										icon: "none"
									})
									this.getUsersGoodsList()
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				}
			},
			change(index) {
				this.current = index;
				this.status = this.tabs[index].type;
				// console.log(this.tabs, index, this.tabs[index])
				this.getUsersGoodsList();
			},
			getStatus(item) {
				let txt = ''
				switch (item.status) {
					case 1:
						txt = '持有中'
						break;
					case 2:
						txt = item.is_show == 1 ? '挂售中' : ''
						break;
					case 3:
						txt = '交易中'
						break;
					case 4:
						txt = '已出售'
						break;
					case 5:
						txt = '已转赠'
						break;
					case 6:
						txt = this.current == 0 ? '已合成' : '已打开'
						break;
					default:
						break;
				}
				return txt
			},
			getUsersGoodsList() {
				this.$http(this.headIndex == 0 ? 'api/orders/usersGoodsList' : 'api/orders/usersBoxList', {
					status: this.status,
					goodsId: this.goodsId,
				}).then(res => {
					this.list = res;
				}).catch(err => {
					console.log(err);
				})
			},
		},
	}
</script>
<style>

</style>
<style lang="less" scoped>
	.white {
		color: #3c3c3c;
	}

	/deep/ .u-field {
		padding: 0 !important;
	}

	/deep/ .u-tab-bar {

		background: linear-gradient(90deg, #EEA634, #DE2D32);
	}

	.page-container {
		background: #f5f5f5;
	}

	.page-container-bj {
		height: 720rpx;
		position: fixed;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
	}

	.mine-head {
		position: relative;
		z-index: 1;

	}

	.mine-head-set {
		position: relative;
		display: flex;
		justify-content: flex-end;

		image {
			width: 42rpx;
			height: 42rpx;
			display: block;
		}
	}

	.mine-head-img {
		position: relative;

	}

	.headImg {
		width: 122rpx;
		height: 122rpx;
		border-radius: 50%;
	}

	.mine-head-tag {
		// position: absolute;
		// bottom: -14rpx;
		width: 130rpx;
		height: 36rpx;
		background: #292A3F;
		border-radius: 18rpx;
		// transform: translateX(-50%);
		left: 50%;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 5rpx;
		}

		text {
			color: #FFD731;
			font-size: 24rpx;
		}
	}

	.mine-location {
		width: 536rpx;
		height: 52rpx;
		padding: 0 20rpx;
		background: url('@/static/mine/address.png') no-repeat;
		background-size: cover;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		text {
			flex: 1;
			color: #fff;
			font-size: 26rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.serve-btn {
		margin: 0;
		width: 87rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		height: 44rpx !important;
		background: #303143;
		border-radius: 22rpx;
		line-height: 44rpx;

		&::after {
			border: none;
		}
	}

	.server-btns {
		margin: 0 auto;
		width: 250rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		line-height: 68rpx;
		height: 68rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 34rpx;

		&::after {
			border: none;
		}
	}

	.more {
		width: 24rpx;
		height: 24rpx;
	}

	.btmIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.menu-row {
		display: flex;
		align-items: center;
		border-radius: 16rpx;
		margin: 0 30rpx;
		margin-top: 60rpx;
		padding: 30rpx 0;
		position: relative;
		flex-wrap: wrap;
		background: rgba(41, 42, 63, 0.8);

		.menu-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 58rpx;
				height: 58rpx;
			}

			text {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #ffffff;
			}
		}
	}


	.mine-main {
		position: relative;
		padding-top: 100rpx;
		border-bottom: none;
	}

	.menu-col {
		position: relative;
		margin-top: 20rpx;
		border-radius: 16rpx;
		padding: 0 30rpx;

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;

			&+.menu-item {
				border-top: 2rpx solid #333;
			}
		}
	}

	.default-button {
		background: #1a1a1a;
		border-radius: 50rpx;
		font-size: 32rpx;
		color: #efe0c0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine-main-top {
		.mine-main-top-li {
			width: 240rpx;
			position: relative;
			height: 50rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 0;
			}

			text {
				flex: 1;
				// width: 200rpx;
				left: 30rpx;
				position: absolute;
				z-index: 9;
				color: #999999;
				font-size: 32rpx;
			}
		}
	}

	.mine-main-nav {
		justify-content: space-around;

		.mine-main-nav-li {
			color: #999999;
			font-size: 26rpx;
		}

		.active {
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
			position: relative;

			&::after {
				content: '';
				left: 50%;
				bottom: -14rpx;
				transform: translateX(-50%);
				position: absolute;
				width: 44rpx;
				height: 4rpx;
				background: linear-gradient(90deg, #EEA634, #DE2D32);
				border-radius: 2rpx;
			}
		}
	}

	.mine-main-ul {
		overflow: hidden;

		.mine-main-li {
			padding: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;

			.mine-main-img {
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 6rpx;
				}

				margin-right: 20rpx;
			}

			.mine-main-right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.mine-main-title {
					font-weight: 500;
					color: #D7B92E;

					background: linear-gradient(0deg, #A776F7 0%, #6990F7 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.blue {
					color: #D7B92E;

					background: linear-gradient(0deg, #FED05E 0%, #EDAFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.red {
					color: #EA232C;
				}

				.mine-main-price {
					text {
						color: #3c3c3c;
						font-size: 28rpx;
						line-height: 1;

						&:last-child {
							font-size: 36rpx;
						}
					}
				}
			}

			.mine-main-footer {

				.blue,
				.red,
				.pink {
					width: 130rpx;
					height: 56rpx !important;
					padding: 0;
					margin: 0;
					color: #FFFFFF;
					font-size: 30rpx;
					border-radius: 28px;

					&::after {
						border: none;
					}
				}

				.blue {
					margin-right: 20rpx;
					background: linear-gradient(90deg, #A776F7 0%, #6990F7 100%);
				}

				.red {
					background: linear-gradient(90deg, #EEA634, #DE2D32);

				}

				.pink {
					margin-right: 20rpx;
					background: linear-gradient(90deg, #E6867F 0%, #E692EC 100%);
				}
			}
		}
	}

	.ipt {
		border: 1px solid #DADADA;
		border-radius: 10rpx;
		height: 66rpx;

		input {
			font-size: 26rpx;
		}
	}

	.ipt2 {
		width: 100%;
		padding-left: 0;

		.label {
			width: 400rpx;
			text-align: right;
		}

		input {
			text-align: center;
			width: 100%;
		}
	}

	.footer {
		border-top: 2rpx solid #CCCCCC;

		.footer-btn {
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;

			&:first-child {
				border-right: 2rpx solid #CCCCCC;
			}
		}
	}

	.code {
		width: 150rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		margin: 0;
		padding: 0;
		line-height: 66rpx;
		height: 66rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 10rpx;

		&::after {
			border: none;
		}
	}

	.open-btn {
		width: 240rpx;
		line-height: 56rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 0;
		padding: 0;
		height: 56rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 28rpx;

		&::after {
			border: none;
		}
	}

	.u-tabs {
		width: calc(100vw - 60rpx);
		position: fixed;
		top: var(--window-top);
		background: #f5f5f5 !important;
		z-index: 100;
	}
</style>
